<template>
  <div class="student-calling">
    <!-- 待签到列表 -->
    <el-card v-if="pendingCalls.length > 0">
      <template #header>
        <div class="card-header">
          <span>待签到列表</span>
        </div>
      </template>

      <el-table :data="pendingCalls" style="width: 100%">
        <el-table-column prop="className" label="班级"/>
        <el-table-column prop="teacherName" label="发起教师"/>
        <el-table-column label="开始时间">
          <template #default="scope">
            {{ formatDateTime(scope.row.start_time) }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间">
          <template #default="scope">
            {{ formatDateTime(scope.row.end_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
                type="primary"
                size="small"
                @click="handleAnswer(scope.row)"
                :loading="loading">
              立即签到
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 无待签到记录 -->
    <el-empty v-else description="暂无待签到记录"/>
  </div>
</template>

<script>
import { formatDateTime } from '@/utils/datetime'
import { mapGetters } from 'vuex'

export default {
  name: "StudentCalling",
  data() {
    return {
      pendingCalls: [],
      loading: false,
      timer: null
    }
  },
  computed: {
    ...mapGetters(['getUser'])
  },
  created() {
    this.getPendingCalls()
    this.startAutoRefresh()
  },
  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    // 获取待签到列表
    async getPendingCalls() {
      try {
        const studentId = this.getUser.id
        const res = await this.$axios.get('/teaching-calling/student/pending', {
          params: { studentId }
        })
        if (res.data.code === 200) {
          this.pendingCalls = res.data.data
          console.log("6666666666666666666666666666666666")
          console.log(res.data.data)
        }
      } catch (error) {
        console.error('获取待签到列表失败:', error)
        ElMessage.error('获取待签到列表失败')
      }
    },

    // 处理签到
    async handleAnswer(call) {
      this.loading = true
      try {
        const studentId = this.getUser.id
        const res = await this.$axios.post('/teaching-calling/student/answer', {
          callId: call.id,
          studentId: studentId  // 改为传递 studentId
        })

        if (res.data.code === 200) {
          ElMessage.success('签到成功')
          this.getPendingCalls()
        } else {
          ElMessage.error(res.data.msg || '签到失败')
        }
      } catch (error) {
        console.error('签到失败:', error)
        ElMessage.error(error.response?.data?.msg || '签到失败')
      } finally {
        this.loading = false
      }
    },

    // 开始自动刷新
    startAutoRefresh() {
      if (this.timer) clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.getPendingCalls()
      }, 10000) // 每10秒刷新一次
    },

    formatDateTime
  }
}
</script>

<style scoped>
.student-calling {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>